<template>
  <el-form>
    <!-- <el-form-item label="课程名称">
      <el-input v-model="formData.courseName" disabled />
    </el-form-item> -->
    <el-form-item label="章节名称" prop="sectionName">
      <el-input v-model="formData.sectionName" />
    </el-form-item>
    <el-form-item label="章节描述" prop="description">
      <el-input v-model="formData.description" />
    </el-form-item>
    <el-form-item>
      <el-button type="submit" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import { getSectionById, saveOrUpdateSection } from '@/services/course'
import { ID } from '@/types'
import Vue from 'vue'
export default Vue.extend({
  name: 'CreateOrUpdateSection',
  props: {
    id: {
      type: [Number, String],
      required: false
    },
    // 创建时，需提交courseId
    courseId: {
      type: [Number, String],
      required: false
    }
  },
  data () {
    return {
      formData: {
        id: '' as ID,
        courseId: '' as ID,
        courseName: '课程名称',
        sectionName: '章节名称-lnw-test',
        description: '章节描述'
      }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    async loadData () {
      if (this.id) {
        const { data } = await getSectionById(this.id)
        this.formData = data.data
      }
    },
    async submit () {
      if (!this.formData.id) {
        if (!this.courseId) {
          this.$emit('fatal', new Error('创建章节时缺少参数courseId'))
          return
        }
        this.formData.courseId = this.courseId
      }

      const { data } = await saveOrUpdateSection(this.formData)
      if (data.code !== '000000') {
        this.$message.error(data.mesg)
        return
      }
      this.$emit('suc')
    }
  }
})
</script>
